<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>迁徙图</title>
    <link rel="stylesheet" href="./css/leaflet.css">
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .leaflet-control-container{
            display: none;
        }
        #forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#c11;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:fixed;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;z-index:9999;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}</style>
</head>
<body>
<div id="map"></div>
<script src="./js/main.min.js"></script>
<script>
    var map = L.map('map');
    var baseLayers = {
        "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: "1234"
        }),
        '高德影像': L.layerGroup([L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
            subdomains: "1234"
        }), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', {
            subdomains: "1234"
        })]),
        "立体地图": L.tileLayer('https://a.tiles.mapbox.com/v3/examples.c7d2024a/{z}/{x}/{y}.png', {
            attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            key: 'BC9A493B41014CAABB98F0471D759707',
            styleId: 22677
        }),
        "Foursquare": L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
            attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            key: 'BC9A493B41014CAABB98F0471D759707',
            styleId: 22677
        }),
        'GeoQ灰色底图': L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map)
    };
    L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
        attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        key: 'BC9A493B41014CAABB98F0471D759707',
        styleId: 22677
    });
    var layercontrol = L.control.layers(baseLayers,{}, {
        position: "topleft"
    }).addTo(map);
    map.setView(L.latLng(29.751342,106.642792), 6);
    var overlay = new L.echartsLayer3(map, echarts);
    var chartsContainer = overlay.getEchartsContainer();
    var myChart = overlay.initECharts(chartsContainer);
    var geoCoordMap = {
        '上海': [121.4648, 31.2891],
        '北京': [116.4551, 40.2539],
        '重庆长安汽车股份有限公司':[106.642792,29.751342],
        '天津市津南双港开发区旺港路7号':[117.30903,39.04823],
        '河北省保定市朝阳南大街2266号':[115.468255,38.822763],
        '江苏省常州市金坛区云湖路58':[119.6662,31.743787],
        '江苏省泰州市高港区通江东路666号':[119.919442,32.279184],
        '江苏省泰州市海陵区祥泰路227号':[119.875171,32.420329],
        '苏州市吴中区宝带西路5009号':[120.513251,31.241549],
        '长沙市芙蓉区荷花路扬帆小区b7栋3号':[113.043648,28.198596],
        '佛山市顺德区朝桂南路与华天路交叉路口往西约160米':[113.335301,22.767129],
        '成都经济技术开发区成龙大道600号':[104.238534,30.55075],
        '成都市龙泉驿区成龙大道3段-999号':[104.246985,30.551956],
        '成都经济技术开发区车城东六路5号':[104.248723,30.546124],
        '重庆市渝北区龙溪镇红锦大道561号':[106.525844,29.611011],
        '重庆市渝北区堡云路9号':[106.769738,29.677898],
        '重庆市江北区鱼嘴镇渝冠大道218号附2号':[106.740884,29.640087],
        '渝开大道西50米':[106.742126,29.640015],
        '重庆市江北区鱼嘴镇长安大道108号':[106.758055,29.639585],
        '重庆市江北区港城南路13号':[106.660622,29.627],
        '重庆市江北区港城路38号':[106.661711,29.63133],
        '重庆市江北区两江大道225号':[106.767431,29.649728],
        '重庆市渝北区空港大道603号':[106.648948,29.762959],
        '重庆市巴南区大江西路凯川·大江东岸东北侧约100米':[106.50265,29.388302],
        '重庆市江津区园区大道99号':[106.467134,29.323102]

    };

    var BJData = [
        [{name: '重庆长安汽车股份有限公司'}, {name: '天津市津南双港开发区旺港路7号', value: 95}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '河北省保定市朝阳南大街2266号', value: 90}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '江苏省常州市金坛区云湖路58', value: 80}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '江苏省泰州市高港区通江东路666号', value: 70}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '江苏省泰州市海陵区祥泰路227号', value: 60}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '苏州市吴中区宝带西路5009号', value: 50}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '长沙市芙蓉区荷花路扬帆小区b7栋3号', value: 40}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '佛山市顺德区朝桂南路与华天路交叉路口往西约160米', value: 30}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '成都经济技术开发区成龙大道600号', value: 20}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '成都市龙泉驿区成龙大道3段-999号', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '成都经济技术开发区车城东六路5号', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '重庆市渝北区龙溪镇红锦大道561号', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '重庆市渝北区堡云路9号', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '重庆市江北区鱼嘴镇渝冠大道218号附2号', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '渝开大道西50米', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '重庆市江北区鱼嘴镇长安大道108号', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '重庆市江北区港城南路13号', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '重庆市江北区港城路38号', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '重庆市江北区两江大道225号', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '重庆市渝北区空港大道603号', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '重庆市巴南区大江西路凯川·大江东岸东北侧约100米', value: 10}],
        [{name: '重庆长安汽车股份有限公司'}, {name: '重庆市江津区园区大道99号', value: 10}],

    ];



    var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord
                }, {
                    coord: toCoord
                }]);
            }
        }
        return res;
    };

    var color = ['#a6c84c', '#ffa022', '#46bee9'];
    var series = [];
    [['北京', BJData]].forEach(function (item, i) {
        series.push({
//                    name: item[0] + ' Top10',
                    name:'',
                    type: 'lines',
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0.7,
                        color: '#fff',
                        symbolSize: 3
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 0,
                            curveness: 0.2
                        }
                    },
                    data: convertData(item[1])
                },
                {
                    name: '',
//                    name: item[0] + ' Top10',
                    type: 'lines',
                    zlevel: 2,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: planePath,
                        symbolSize: 15
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 1,
                            opacity: 0.4,
                            curveness: 0.2
                        }
                    },
                    data: convertData(item[1])
                },
                {
                    name: '',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    symbolSize: function (val) {
                        return val[2] / 8;
                    },
                    itemStyle: {
                        normal: {
                            color: color[i]
                        }
                    },
                    data: item[1].map(function (dataItem) {
                        return {
                            name: dataItem[1].name,
                            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                        };
                    })
                });
    });

    option = {
//        backgroundColor: '#404a59',
        title: {
            text: '重庆人爱去哪（五一假期）',
            subtext: 'Develop By WanderGIS',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            top: 'bottom',
            left: 'right',
            data: ['北京 Top10', '上海 Top10', '广州 Top10'],
            textStyle: {
                color: '#fff'
            },
            selectedMode: 'single'
        },
        geo: {
            map: '',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#404a59'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: series
    };
    // 使用刚指定的配置项和数据显示图表。
    overlay.setOption(option);
    overlay.on('click', function (param) {  
                //param参数包含的内容有： 
                //param.name：X轴的值 
                //param.data：Y轴的值 
                //param.value：Y轴的值 
                //param.type：点击事件均为click 
                //param.seriesName：legend的名称 
                //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） 
                //param.dataIndex：数值序列（X轴上当前点是第几个点）
                //alert(param.seriesName);  //legend的名称
                alert(param);  //X轴的值
            });
    function clikCity(city) {
      window.parent.changeCity(city);
    }
</script>
</body>
</html>